<script setup>
import { Avatar, SuccessFilled,User,PieChart } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue'
//导入echarts图型库
import * as echarts from 'echarts'


//页面挂载时初始化图标
onMounted(() => {
    initChartBar()
    initChartPie()
})

const barRef = ref(null)
const pieRef = ref(null)

// 初始化柱形图
const initChartBar = () => {
    const myEcharts = echarts.init(barRef.value)
    const option = {
        xAxis: {
            type: 'category',
            data: ['软件工程', '数据大数据', '艺术设计', '计算机网络', '云计算']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70,],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    }
    myEcharts.setOption(option)
}
/* ---------- 饼图（新增） ---------- */
const initChartPie = () => {
  const myEcharts = echarts.init(pieRef.value)
  myEcharts.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: '5%', left: 'center' },
    series: [
      {
        name: '各专业人数',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: { borderRadius: 10 },
        label: { show: false, position: 'center' },
        emphasis: {
          label: { show: true, fontSize: 20, fontWeight: 'bold' }
        },
        labelLine: { show: false },
        data: [
          { value: 120, name: '软件工程' },
          { value: 200, name: '数据大数据' },
          { value: 150, name: '艺术设计' },
          { value: 80, name: '计算机网络' },
          { value: 70, name: '云计算' }
        ]
      }
    ]
  })
}
</script>
<template>
    <div class="dashborad">
        <div class="item">
            <p class="title">新生人数</p>
            <p class="value">2400</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60">
                    <Avatar />
                </el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">已报到人数</p>
            <p class="value">2300</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60">
                    <SuccessFilled />
                </el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">未报到人数</p>
            <p class="value">100</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60">
                    <User />
                </el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">报到率</p>
            <p class="value">96%</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60" >
                    <PieChart />
                </el-icon>
            </div>
        </div>
    </div>
    <div class="chart-box">
        <div ref="barRef" class="chart-bar chart-item">

        </div>
        <div ref="pieRef" class="chart-pine chart-item">

        </div>

    </div>
</template>
<style scoped>
.dashborad {
    display: flex;
    width: 97%;
}

.item {
    width: 200px;
    height: 100px;
    margin: 20px;
    flex: 1;
    border-radius: 5px;

}

.item:first-child {
    background-color: rgb(246, 11, 222);
}

.item:nth-child(2) {
    background-color: rgb(8, 249, 16);
}

.item:nth-child(3) {
    background-color: rgb(238, 72, 6);
}

.item:nth-child(4) {
    background-color: blue;
}

.title {
    color: aliceblue;
    text-align: left;
    margin-left: 20px;
}

.value {
    font-size: 20px;
    font-weight: bold;
    color: aliceblue;
    text-align: left;
    margin-left: 20px;
    margin-top: -10px;
}

.icon-box {
    width: 80px;
    height: 80px;
    background-color: #ffffffaf;
    float: right;
    margin-top: -90px;
    margin-right: 20px;
    border-radius: 50%;
}

.chart-box {
    height: 400px;
    display: flex;
    width: 97%;
}

.chart-item {
    width: 400px;
    height: 100%;
    background-color: #09c6ff27;
    margin-right: 20px;
    flex: 1;
    border-radius: 5px;
}
</style>